<template>
	<div class="large-screen-tags">
		<!-- 背景图导致中间留白 -->
		<span
			v-for="item in list"
			:key="item.value"
			:class="{ 'large-screen-item-active': value === item.value }"
			class="large-screen-item"
			@click="emit('change', item.value)"
		>
			{{ item.name }}
		</span>
	</div>
</template>

<script setup>
const emit = defineEmits(['change'])
const props = defineProps({
	value: {
		type: Number,
		default: 7
	},
	list: {
		type: Array,
		default: () => [
			{
				name: '最近半个月',
				value: 15
			},
			{
				name: '最近一周',
				value: 7
			}
		]
	}
})
</script>

<style lang="scss" scoped>
</style>
